// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化筛选器事件监听 - 移除业绩汇总筛选器的初始化
    // 初始化区域卡片点击事件
    initRegionCards();

    // 初始化业绩汇总排行榜图表
    initPerformanceRankingChart();
    
    // 初始化区域回款排行榜图表
    initPaymentRankingChart();
    
});

// 切换标签页
function switchTab(tabType) {
    // 隐藏所有内容
    document.getElementById('performance-content').classList.add('hidden');
    document.getElementById('payment-content').classList.add('hidden');
    
    // 移除所有标签的活跃状态
    document.getElementById('performance-tab').classList.remove('tab-active');
    document.getElementById('performance-tab').classList.add('text-neutral-500');
    document.getElementById('payment-tab').classList.remove('tab-active');
    document.getElementById('payment-tab').classList.add('text-neutral-500');
    
    // 显示选中的内容和激活对应的标签
    if (tabType === 'performance') {
        document.getElementById('performance-content').classList.remove('hidden');
        document.getElementById('performance-tab').classList.add('tab-active');
        document.getElementById('performance-tab').classList.remove('text-neutral-500');
        
        // 确保业绩汇总图表正确渲染
        if (window.performanceChart) {
            window.performanceChart.resize();
        }
    } else {
        document.getElementById('payment-content').classList.remove('hidden');
        document.getElementById('payment-tab').classList.add('tab-active');
        document.getElementById('payment-tab').classList.remove('text-neutral-500');
        
        // 确保区域回款图表在标签页切换时正确渲染
        if (window.paymentChart) {
            window.paymentChart.resize();
        }
    }
}

// 初始化筛选器
function initFilters() {
    // 业绩汇总筛选器 - 已被替换为排行榜，移除相关代码
    
    // 区域回款筛选器（如果有）
    // 注意：之前的代码中可能尝试为不存在的元素添加事件监听器，这里保持原有逻辑但添加检查
    const paymentYear = document.getElementById('payment-year');
    const paymentQuarter = document.getElementById('payment-quarter');
    const paymentRegion = document.getElementById('payment-region');
    
    if (paymentYear && paymentQuarter && paymentRegion) {
        paymentYear.addEventListener('change', function() {
            filterPaymentData(this.value, paymentQuarter.value, paymentRegion.value);
        });
        
        paymentQuarter.addEventListener('change', function() {
            filterPaymentData(paymentYear.value, this.value, paymentRegion.value);
        });
        
        paymentRegion.addEventListener('change', function() {
            filterPaymentData(paymentYear.value, paymentQuarter.value, this.value);
        });
    }
}

// 初始化业绩汇总排行榜图表
// 修改initPerformanceRankingChart函数，隐藏横轴
function initPerformanceRankingChart() {
    try {
        // 获取canvas元素
        const canvas = document.getElementById('performanceRankingChart');
        if (!canvas) {
            console.error('无法找到canvas元素: performanceRankingChart');
            return;
        }
        
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.error('无法获取canvas上下文');
            return;
        }
        
        // 区域数据
        const regions = ['陕西大区', '华北大区', '华东大区', '华南大区', '西北大区', '西南大区', '东北大区', '江苏区域', '浙江区域', '安徽区域', '福建区域', '山东区域', '国际贸易部', '冀北山西'];
        const percentages = [92.3, 87.5, 84.2, 79.1, 76.8, 72.4, 69.7, 65.3, 62.1, 58.9, 55.6, 52.3, 49.1, 45.8];
        
        // 根据达成率排序
        const sortedData = regions.map((region, index) => ({ region, percentage: percentages[index] })).sort((a, b) => b.percentage - a.percentage);
        
        // 提取排序后的数据
        const sortedRegions = sortedData.map(item => item.region);
        const sortedPercentages = sortedData.map(item => item.percentage);
        
        // 设置前三名的特殊颜色
        const backgroundColors = sortedPercentages.map((percentage, index) => {
            if (index === 0) return 'rgba(255, 215, 0, 0.8)'; // 金色
            if (index === 1) return 'rgba(192, 192, 192, 0.8)'; // 银色
            if (index === 2) return 'rgba(205, 127, 50, 0.8)'; // 铜色
            return 'rgba(54, 162, 235, 0.6)'; // 蓝色
        });
        
        // 获取最大值并设置x轴最大值
        const maxValue = Math.max(...sortedPercentages);
        const xAxisMax = Math.ceil(maxValue * 1.1); // 设置为最大值的110%，留出显示空间
        
        // 创建图表 - 增强datalabels配置并隐藏横轴
        window.performanceChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: sortedRegions,
                datasets: [{
                    label: '达成率 (%)',
                    data: sortedPercentages,
                    backgroundColor: backgroundColors,
                    borderWidth: 0,
                    borderRadius: 4,
                }]
            },
            // 明确指定要使用的插件
            plugins: [ChartDataLabels],
            options: {
                indexAxis: 'y', // 设置为横向柱状图
                // 调整布局边距，为右侧标签留出更多空间
                layout: {
                    padding: {
                        right: 40 // 增加右侧内边距
                    }
                },
                // 修改点击事件处理 - 移除页签切换，直接在当前页签定位
                onClick: function(event, elements) {
                    if (elements.length > 0) {
                        const elementIndex = elements[0].index;
                        const regionName = sortedRegions[elementIndex];
                        // 直接在业绩汇总页签内定位，不切换页签
                        scrollToRegionCard(regionName, 'performance');
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `达成率: ${context.raw}%`;
                            }
                        }
                    },
                    // 数据标签插件配置 - 增强版
                    datalabels: {
                        display: true,
                        anchor: 'end',
                        align: 'right',
                        formatter: function(value) {
                            return value + '%';
                        },
                        color: '#333',
                        font: {
                            weight: 'bold',
                            size: 12
                        },
                        // 确保标签不会被裁剪
                        clip: false
                    }
                },
                scales: {
                    x: {
                        display: false, // 隐藏整个x轴（轴线、刻度和标签）
                        beginAtZero: true,
                        max: xAxisMax, // 设置x轴最大值
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        },
                        grid: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    y: {
                        grid: {
                            display: false
                        }
                    }
                },
                animation: {
                    duration: 1500,
                    easing: 'easeOutQuart'
                },
                maintainAspectRatio: false
            },
            // 明确指定使用的插件
            plugins: [ChartDataLabels]
        });
        
        console.log('业绩达成率排行榜图表已成功初始化');
    } catch (error) {
        console.error('初始化业绩达成率排行榜时出错:', error);
    }
}

// 修改initPaymentRankingChart函数，隐藏横轴
function initPaymentRankingChart() {
    try {
        // 获取canvas元素
        const canvas = document.getElementById('paymentRankingChart');
        if (!canvas) {
            console.error('无法找到canvas元素: paymentRankingChart');
            return;
        }
        
        const ctx = canvas.getContext('2d');
        if (!ctx) {
            console.error('无法获取canvas上下文');
            return;
        }
        
        // 区域回款数据
        const regions = [
            '陕西大区', '华北大区', '华东大区', '华南大区', '西北大区',
            '西南大区', '东北大区', '江苏区域', '浙江区域', '安徽区域',
            '福建区域', '山东区域', '国际贸易部', '冀北山西'
        ];
        const percentages = [
            74.8, 68.7, 65.0, 62.3, 59.8,
            56.5, 53.2, 49.9, 46.7, 43.5,
            40.2, 37.0, 6.82, 4.55
        ];
        
        // 根据达成率排序
        const sortedData = regions.map((region, index) => ({ region, percentage: percentages[index] })).sort((a, b) => b.percentage - a.percentage);
        
        // 提取排序后的数据
        const sortedRegions = sortedData.map(item => item.region);
        const sortedPercentages = sortedData.map(item => item.percentage);
        
        // 设置前三名的特殊颜色
        const backgroundColors = sortedPercentages.map((percentage, index) => {
            if (index === 0) return 'rgba(255, 215, 0, 0.8)'; // 金色
            if (index === 1) return 'rgba(192, 192, 192, 0.8)'; // 银色
            if (index === 2) return 'rgba(205, 127, 50, 0.8)'; // 铜色
            return 'rgba(54, 162, 235, 0.6)'; // 蓝色
        });
        
        // 获取最大值并设置x轴最大值
        const maxValue = Math.max(...sortedPercentages);
        const xAxisMax = Math.ceil(maxValue * 1.1); // 设置为最大值的110%，留出显示空间
        
        // 创建图表 - 增强datalabels配置并隐藏横轴
        window.paymentChart1 = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: sortedRegions,
                datasets: [{
                    label: '达成率 (%)',
                    data: sortedPercentages,
                    backgroundColor: backgroundColors,
                    borderWidth: 0,
                    borderRadius: 4,
                }]
            },
            // 明确指定要使用的插件
            plugins: [ChartDataLabels],
            options: {
                indexAxis: 'y', // 设置为横向柱状图
                // 调整布局边距，为右侧标签留出更多空间
                layout: {
                    padding: {
                        right: 40 // 增加右侧内边距
                    }
                },
                // 修改点击事件处理 - 移除页签切换，直接在当前页签定位
                onClick: function(event, elements) {
                    if (elements.length > 0) {
                        const elementIndex = elements[0].index;
                        const regionName = sortedRegions[elementIndex];
                        // 直接在区域回款页签内定位，不切换页签
                        scrollToRegionCard(regionName, 'payment');
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `达成率: ${context.raw}%`;
                            }
                        }
                    },
                    // 增强数据标签配置
                    datalabels: {
                        display: true,
                        anchor: 'end',
                        align: 'right',
                        formatter: function(value) {
                            return value + '%';
                        },
                        color: '#333',
                        font: {
                            weight: 'bold',
                            size: 12
                        },
                        // 确保标签不会被裁剪
                        clip: false
                    }
                },
                scales: {
                    x: {
                        display: false, // 隐藏整个x轴（轴线、刻度和标签）
                        beginAtZero: true,
                        max: xAxisMax, // 设置x轴最大值
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        },
                        grid: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    y: {
                        grid: {
                            display: false
                        }
                    }
                },
                animation: {
                    duration: 1500,
                    easing: 'easeOutQuart'
                },
                maintainAspectRatio: false
            }
        });
        
        console.log('区域回款排行榜图表已成功初始化');
    } catch (error) {
        console.error('初始化区域回款排行榜图表时出错:', error);
    }
}

// 筛选区域回款数据
function filterPaymentData(year, quarter, region) {
    console.log('筛选回款数据:', { year, quarter, region });
    // 这里可以实现实际的筛选逻辑
    // 模拟筛选效果
    alert(`区域回款数据已按以下条件筛选：\n年份：${year}年\n季度：${quarter === 'all' ? '全年' : quarter}\n区域：${region === 'all' ? '全部区域' : getRegionName(region)}`);
}

// 获取区域名称
function getRegionName(regionCode) {
    const regionMap = {
        'north': '华北大区',
        'south': '华南大区',
        'east': '华东大区',
        'west': '西北大区',
        'shaanxi': '陕西大区'
    };
    return regionMap[regionCode] || regionCode;
}

// 区域销售人员数据 - 模拟数据
// 使用window对象作为命名空间
window.regionSalespersonData = {
    '华东大区': [
        {
            name: '王军',
            position: '销售代表',
            personalTarget: 1404754,
            monthlyAchievementRate: 98.3,
            paymentRate: 0.0,
            salesProgress: { current: 725649, target: 738268 }
        },
        {
            name: '王明',
            position: '高级销售代表',
            personalTarget: 1550828,
            monthlyAchievementRate: 74.2,
            paymentRate: 0.0,
            salesProgress: { current: 525627, target: 708433 }
        },
        {
            name: '陈敏',
            position: '区域销售经理',
            personalTarget: 1658915,
            monthlyAchievementRate: 72.9,
            paymentRate: 0.0,
            salesProgress: { current: 625649, target: 858268 }
        }
    ],
    '陕西大区': [
        {
            name: '李强',
            position: '销售代表',
            personalTarget: 1204754,
            monthlyAchievementRate: 88.3,
            paymentRate: 50.0,
            salesProgress: { current: 625649, target: 738268 }
        },
        {
            name: '张伟',
            position: '高级销售代表',
            personalTarget: 1350828,
            monthlyAchievementRate: 79.2,
            paymentRate: 60.0,
            salesProgress: { current: 525627, target: 708433 }
        }
    ],
    '华北大区': [
        {
            name: '张明',
            position: '销售代表',
            personalTarget: 1104754,
            monthlyAchievementRate: 78.3,
            paymentRate: 40.0,
            salesProgress: { current: 625649, target: 738268 }
        },
        {
            name: '赵丽',
            position: '高级销售代表',
            personalTarget: 1250828,
            monthlyAchievementRate: 84.2,
            paymentRate: 30.0,
            salesProgress: { current: 525627, target: 708433 }
        }
    ]
};

// 初始化区域卡片点击事件
function initRegionCards() {
    const detailButtons = document.querySelectorAll('.text-primary');
    const backButton = document.getElementById('back-button');
    const regionBackButton = document.getElementById('region-back-button');
    
    detailButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            // 找到对应的区域名称
            const regionName = this.closest('.card-shadow').querySelector('h3').textContent;
            
            // 显示区域人员详情页
            showRegionDetail(regionName);
        });
    });
    
    // 返回首页按钮事件
    if (backButton) {
        // 保留原有逻辑，这里backButton已经有onclick属性设置为跳转到index.html
    }
    
    // 区域详情返回按钮事件
    if (regionBackButton) {
        regionBackButton.addEventListener('click', function() {
            // 隐藏区域人员详情页
            document.getElementById('region-detail-content').classList.add('hidden');
        });
    }
}

// 显示区域人员详情
function showRegionDetail(regionName) {
    // 显示区域人员详情页
    document.getElementById('region-detail-content').classList.remove('hidden');
    
    // 更新页面标题
    document.getElementById('region-detail-title').textContent = regionName + '销售分析';
    
    // 获取人员列表容器
    const salespersonList = document.getElementById('salesperson-list');
    
    // 清空列表
    salespersonList.innerHTML = '';
    
    // 获取该区域的销售人员数据
    const salespersons = window.regionSalespersonData[regionName] || [];
    
    // 如果没有数据，显示提示信息
    if (salespersons.length === 0) {
        salespersonList.innerHTML = '<div class="bg-white rounded-lg p-4 card-shadow text-center text-neutral-500">暂无销售人员数据</div>';
        return;
    }
    
    // 生成销售人员卡片
    salespersons.forEach(salesperson => {
        const progressPercent = (salesperson.salesProgress.current / salesperson.salesProgress.target * 100).toFixed(1);
        
        const card = document.createElement('div');
        card.className = 'bg-white rounded-lg overflow-hidden card-shadow';
        card.innerHTML = `
            <div class="p-4">
                <!-- 上方：头像、姓名、职位 -->
                <div class="flex items-center space-x-4 mb-4 pb-4 border-b border-neutral-100">
                    <div class="w-10 h-10 rounded-full bg-neutral-100 flex items-center justify-center">
                        <i class="fa fa-id-card-o text-neutral-400"></i>
                    </div>
                    <div>
                        <h4 class="font-semibold text-base">${salesperson.name}</h4>
                        <p class="text-sm text-neutral-500">${salesperson.position}</p>
                    </div>
                </div>
                
                <!-- 下方：其他信息 -->
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <p class="text-xs text-neutral-500 mb-1">个人目标</p>
                        <p class="font-semibold text-lg">¥${formatNumber(salesperson.personalTarget)}</p>
                    </div>
                    <div>
                        <p class="text-xs text-neutral-500 mb-1">本月达成率</p>
                        <p class="font-semibold text-lg ${getRateColorClass(salesperson.monthlyAchievementRate)}">${salesperson.monthlyAchievementRate}%</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <p class="text-xs text-neutral-500 mb-1">回款率</p>
                        <p class="font-semibold text-lg ${getRateColorClass(salesperson.paymentRate)}">${salesperson.paymentRate}%</p>
                    </div>
                    <div class="text-right">
                        <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                            <span>查看详情</span>
                            <i class="fa fa-angle-right"></i>
                        </button>
                    </div>
                </div>
                
                <div class="mt-2">
                    <div class="flex justify-between text-xs mb-1">
                        <span class="text-neutral-500">销售目标完成度</span>
                        <span class="text-neutral-600">¥${formatNumber(salesperson.salesProgress.current)}/${formatNumber(salesperson.salesProgress.target)}</span>
                    </div>
                    <div class="w-full bg-neutral-100 rounded-full h-2.5">
                        <div class="bg-primary h-2.5 rounded-full" style="width: ${progressPercent}%"></div>
                    </div>
                </div>
            </div>
        `;
        
        salespersonList.appendChild(card);
    });
}

// 格式化数字，添加千分位分隔符
function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

// 根据达成率获取颜色类
function getRateColorClass(rate) {
    if (rate >= 90) return 'text-success';
    if (rate >= 70) return 'text-primary';
    return 'text-danger';
}

// 响应式处理
function handleResize() {
    const windowWidth = window.innerWidth;
    
    // 针对不同屏幕宽度的特殊处理
    if (windowWidth < 640) {
        // 移动端特殊处理
        console.log('移动端视图');
    } else {
        // 平板/桌面端特殊处理
        console.log('桌面端视图');
    }
    
    // 确保图表在窗口大小变化时正确调整
    if (window.paymentChart) {
        window.paymentChart.resize();
    }
    
    // 确保业绩汇总图表也能正确调整
    if (window.performanceChart) {
        window.performanceChart.resize();
    }
}

// 添加窗口大小变化监听
window.addEventListener('resize', handleResize);
// 初始调用一次
handleResize();

// 修改滚动到区域卡片的函数，支持在指定页签内查找
function scrollToRegionCard(regionName, tabType) {
    // 移除区域名称中可能存在的特殊字符，确保准确匹配
    const normalizedRegionName = regionName.trim();
    
    // 获取当前应该查找卡片的内容区域
    let contentAreaId = 'payment-content'; // 默认区域回款内容
    if (tabType === 'performance') {
        contentAreaId = 'performance-content'; // 业绩汇总内容
    }
    
    // 获取对应的内容区域
    const contentArea = document.getElementById(contentAreaId);
    if (!contentArea) {
        console.error(`未找到内容区域: ${contentAreaId}`);
        return;
    }
    
    // 仅在指定的内容区域内查找卡片
    const allCards = contentArea.querySelectorAll('.card-shadow');
    let targetCard = null;
    
    allCards.forEach(card => {
        const regionTitle = card.querySelector('h3');
        if (regionTitle && regionTitle.textContent.trim() === normalizedRegionName) {
            targetCard = card;
        }
    });
    
    // 如果找到目标卡片，则滚动到该卡片
    if (targetCard) {
        console.log(`已在${tabType === 'performance' ? '业绩汇总' : '区域回款'}页签找到区域卡片: ${regionName}`);
        // 添加高亮效果
        targetCard.classList.add('bg-blue-50');
        
        // 滚动到卡片位置
        targetCard.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
        });
        
        // 3秒后移除高亮效果
        setTimeout(() => {
            targetCard.classList.remove('bg-blue-50');
        }, 3000);
    } else {
        console.log(`在${tabType === 'performance' ? '业绩汇总' : '区域回款'}页签未找到区域卡片: ${regionName}`);
    }
}